
import React, { useState, useEffect } from 'react'
import { Layout, Row, Col, Button, Modal, message, Tabs, Table, Steps } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import QRCode from "qrcode.react";
import copy from "copy-to-clipboard";
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import UserMenu from '@/components/userMenu'
import API from '@/api/api'
import coinBtc from '../../assets/img/icon/btc.png'
import coinUsdt from '../../assets/img/icon/usdt.png'
import coinEth from '../../assets/img/icon/eth.png'
import coinIpfs from '../../assets/img/icon/ipfs.png'
import './index.scss';
const { Content } = Layout;
const { TabPane } = Tabs;
const { Column } = Table;
const { Step } = Steps;

function OrderDtail(props) {
    const [load, setLoad] = useState(true)
    const [type, setType] = useState('reward')
    const [recordList, setRecordList] = useState()
    const [coinName, setCoinName] = useState()
    const [total, setTotal] = useState(0)
    const coinImg = { 'BTC': coinBtc, 'USDT': coinUsdt, 'ETH': coinEth, 'FIL': coinIpfs }

    const tabChange = (e) => {
        setType(e)
    }

    useEffect(() => {
        // getOrderDetail()
    }, [])

    const getOrderDetail = async (page = 1) => {
        let id = props.match.params.id
        let opts = { orderId: id }
        let res = await API.orderDetail(opts)
        if (res) {
            setLoad(false)
        } else {
            setLoad(false)
        }
    }

    const operations = {
        left: <p className="orderDtail-back" onClick={() => props.history.push('/myOrder')}><LeftOutlined />上一页</p>,
        right: <span className="orderDtail-date">订单日期:2021-02-2719:33:35</span>
    }

    const dataSource = [
        {
            key: '1',
            time: '2021-02-28',
            reward: { total: '0.00005616', rate: '$2.59' },
            efee: { total: '0.00005616', rate: '$2.59' },
            time: '2021-02-28',
            mfee: { total: '0.00005616', rate: '$2.59' },
            get: 10,
            curren: 5,
            all: 5,
        }
    ]

    return (
        <Layout className="layout">
            <HeaderBox />
            <Content>
                <Row className="orderDtail main" justify="space-between">
                    <Col lg={4} md={20}>
                        <UserMenu current="3" />
                    </Col>
                    <Col className="orderDtail-main" lg={19} md={20}>
                        <Row align="middle">
                            <Tabs className="orderDtail-title" defaultActiveKey="info" onChange={tabChange} tabBarExtraContent={operations}>
                                <TabPane tab="订单明细" key="info">
                                    <Steps className="step-list" current={1} progressDot>
                                        <Step title="矿机下单" />
                                        <Step title="支付确认" />
                                        <Step title="矿机分配" />
                                        <Step title="开始收益" />
                                        <Step title="订单完成" />
                                    </Steps>
                                    <section className="orderDtail-list">
                                        <Row><h3>商品清单</h3></Row>
                                        <table>
                                            <tr>
                                                <th>商品名称</th>
                                                <th>单价</th>
                                                <th>算力</th>
                                                <th>数量</th>
                                                <th>小计</th>
                                            </tr>
                                            <tr>
                                                <td>BTC/BCH-S19</td>
                                                <td>$43.48</td>
                                                <td>THS</td>
                                                <td>1</td>
                                                <td>$0.00</td>
                                            </tr>
                                            <tr><th colSpan="5" className="table-desc">
                                                电费包：<span className="red">$0.00</span>  应付金额总计：<span className="red">$0.00</span>
                                            </th></tr>
                                        </table>
                                    </section>
                                    <section className="orderDtail-list">
                                        <Row><h3>订单详细</h3></Row>
                                        <table className="orderDtail-tb">
                                            <tr>
                                                <th>订单编号</th>
                                                <td>161484618738nY</td>
                                            </tr>
                                            <tr>
                                                <th>下单日期</th>
                                                <td>2021-03-04 16:23:07</td>
                                            </tr>
                                            <tr>
                                                <th>总算力</th>
                                                <td>1 THS</td>
                                            </tr>
                                            <tr>
                                                <th>币种</th>
                                                <td>BTC</td>
                                            </tr>
                                            <tr>
                                                <th>管理费用</th>
                                                <td>0%</td>
                                            </tr>
                                            <tr>
                                                <th>电费/天</th>
                                                <td>$0.538</td>
                                            </tr>
                                            <tr>
                                                <th>开始日期</th>
                                                <td>2021-03-04 16:26:07</td>
                                            </tr>
                                            <tr>
                                                <th>结束日期</th>
                                                <td>2021-08-31 16：23:07</td>
                                            </tr>
                                            <tr>
                                                <th>订单状态</th>
                                                <td>未付款</td>
                                            </tr>
                                        </table>
                                    </section>
                                </TabPane>
                                <TabPane tab="收益明细" key="reward">
                                    <Table dataSource={dataSource} >
                                        <Column title="时间" dataIndex="time" key="time" />
                                        <Column title="总收益" dataIndex="reward" key="reward" render={tags => (
                                            <>
                                                {
                                                    <div className="table-two">
                                                        <p>{tags.total}</p>
                                                        <a>{tags.rate}</a>
                                                    </div>
                                                }
                                            </>
                                        )} />
                                        <Column title="每日电费" dataIndex="efee" key="efee" render={tags => (
                                            <>
                                                {
                                                    <div className="table-two">
                                                        <p>{tags.total}</p>
                                                        <a>{tags.rate}</a>
                                                    </div>
                                                }
                                            </>
                                        )} />
                                        <Column title="管理费用" dataIndex="mfee" key="mfee" render={tags => (
                                            <>
                                                {
                                                    <div className="table-two">
                                                        <p>{tags.total}</p>
                                                        <a>{tags.rate}</a>
                                                    </div>
                                                }
                                            </>
                                        )} />
                                        <Column title="电费包折扣" dataIndex="total" key="total" />
                                        <Column title="净收入" dataIndex="get" key="get" />
                                        <Column title="当前期数" dataIndex="curren" key="curren" />
                                        <Column title="总期数" dataIndex="all" key="all" />
                                    </Table>
                                </TabPane>
                                <TabPane tab="电费包" key="fee">
                                    <section className="orderDtail-list">
                                        <Row><h3>电费包明细</h3></Row>
                                        <table>
                                            <tr>
                                                <th>商品名称</th>
                                                <th>单价</th>
                                                <th>算力</th>
                                                <th>数量</th>
                                                <th>小计</th>
                                            </tr>
                                            <tr>
                                                <td>BTC/BCH-S19</td>
                                                <td>$43.48</td>
                                                <td>THS</td>
                                                
                                                <td>1</td>
                                                <td>$0.00</td>
                                            </tr>
                                            <tr><th colSpan="5" className="table-desc">
                                                电费包：<span className="red">$0.00</span>  应付金额总计：<span className="red">$0.00</span>
                                            </th></tr>
                                        </table>
                                    </section>
                                </TabPane>
                            </Tabs>
                        </Row>
                    </Col>
                </Row>

            </Content>
            <FooterBox />
        </Layout>
    )
}

export default OrderDtail